<!DOCTYPE html> 
<html>
	<head>
		<script src="jquery-2.1.3.min.js"></script>
		<script src="webgl-utils.js"></script>
		<script src="mat.js"></script>
		<script src="webglfilter.js"></script>
		<script src="main.js"></script>
		
		<!-- vertex shader -->
		<script id="2d-vertex-shader" type="x-shader/x-vertex">
		attribute vec2 a_position;
		attribute vec2 a_texCoord;

		uniform vec2 u_resolution;

		varying vec2 v_texCoord;

		void main() {
		   // convert the rectangle from pixels to 0.0 to 1.0
		   vec2 zeroToOne = a_position / u_resolution;

		   // convert from 0->1 to 0->2
		   vec2 zeroToTwo = zeroToOne * 2.0;

		   // convert from 0->2 to -1->+1 (clipspace)
		   vec2 clipSpace = zeroToTwo - 1.0;

		   gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);

		   // pass the texCoord to the fragment shader
		   // The GPU will interpolate this value between points.
		   v_texCoord = a_texCoord;
		}
		</script>
		
		<!-- fragment shader -->
		<script id="2d-fragment-shader" type="x-shader/x-fragment">
		precision mediump float;

		// our texture
		uniform sampler2D u_image;
		uniform vec2 u_textureSize;
		uniform float u_kernel[25];

		// the texCoords passed in from the vertex shader.
		varying vec2 v_texCoord;
		
		/*
		vec4 remap(vec4 pix, vec4 mean, vec4 alpha, vec4 beta, vec4 sigmaR) {
			vec4 diffV = pix - mean;
			vec4 magiV = abs(diffV);
			vec4 signV = sign(diffV);
			
			vec4 tone = mean + signV * ( (magiV - sigmaR) * beta + sigmaR );
			vec4 deti = mean + signV * pow( magiV / sigmaR, alpha ) * sigmaR;
			
			vec4 pixOut;
			for (int i = 0; i < 4; ++i) {
				if ( magiV[i] > sigmaR[i] ) {
					pixOut[i] = tone[i];
				} else {
					pixOut[i] = deti[i];
				}
			}
			
			return pixOut;
		}
		*/

		void main() {
				vec2 onePixel = vec2(1.0, 1.0) / u_textureSize;
				
				vec4 colorSum =
						texture2D(u_image, v_texCoord + onePixel * vec2(-2, -2)) * u_kernel[0] +
						texture2D(u_image, v_texCoord + onePixel * vec2(-1, -2)) * u_kernel[1] +
						texture2D(u_image, v_texCoord + onePixel * vec2( 0, -2)) * u_kernel[2] +
						texture2D(u_image, v_texCoord + onePixel * vec2( 1, -2)) * u_kernel[3] +
						texture2D(u_image, v_texCoord + onePixel * vec2( 2, -2)) * u_kernel[4] +
						
						texture2D(u_image, v_texCoord + onePixel * vec2(-2, -1)) * u_kernel[5] +
						texture2D(u_image, v_texCoord + onePixel * vec2(-1, -1)) * u_kernel[6] +
						texture2D(u_image, v_texCoord + onePixel * vec2( 0, -1)) * u_kernel[7] +
						texture2D(u_image, v_texCoord + onePixel * vec2( 1, -1)) * u_kernel[8] +
						texture2D(u_image, v_texCoord + onePixel * vec2( 2, -1)) * u_kernel[9] +
						
						texture2D(u_image, v_texCoord + onePixel * vec2(-2,  0)) * u_kernel[10] +
						texture2D(u_image, v_texCoord + onePixel * vec2(-1,  0)) * u_kernel[11] +
						texture2D(u_image, v_texCoord + onePixel * vec2( 0,  0)) * u_kernel[12] +
						texture2D(u_image, v_texCoord + onePixel * vec2( 1,  0)) * u_kernel[13] +
						texture2D(u_image, v_texCoord + onePixel * vec2( 2,  0)) * u_kernel[14] +
						
						texture2D(u_image, v_texCoord + onePixel * vec2(-2,  1)) * u_kernel[15] +
						texture2D(u_image, v_texCoord + onePixel * vec2(-1,  1)) * u_kernel[16] +
						texture2D(u_image, v_texCoord + onePixel * vec2( 0,  1)) * u_kernel[17] +
						texture2D(u_image, v_texCoord + onePixel * vec2( 1,  1)) * u_kernel[18] +
						texture2D(u_image, v_texCoord + onePixel * vec2( 2,  1)) * u_kernel[19] +
						
						texture2D(u_image, v_texCoord + onePixel * vec2(-2,  2)) * u_kernel[20] +
						texture2D(u_image, v_texCoord + onePixel * vec2(-1,  2)) * u_kernel[21] +
						texture2D(u_image, v_texCoord + onePixel * vec2( 0,  2)) * u_kernel[22] +
						texture2D(u_image, v_texCoord + onePixel * vec2( 1,  2)) * u_kernel[23] +
						texture2D(u_image, v_texCoord + onePixel * vec2( 2,  2)) * u_kernel[24];

				gl_FragColor = colorSum / vec4(255.0, 255.0, 255.0, 1);
		}
		</script>
	</head>
	
	<body>
		<canvas id="original"></canvas>
		<canvas id="webgl"></canvas>
	</body>
</html>